<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <ul id="course">
        勿忘初心，方得始终
        <!-- &lt;!&ndash;第一阶段：原生JS编程功底&ndash;&gt; -->
        <li class="demo">闭包、作用域、THIS、OOP <a href="#">百度</a></li>
        <li>DOM的渲染机制和性能优化</li>
        <li>正则表达式解析处理</li>
        <li>定时器及JS中的异步编程</li>
        <li>JS中的事件模型</li>
        <li>JQ实战应用和源码解读</li>
        <li>JS中的设计模式：单例、构造、原型、发布订阅、Promise...</li>
        <li>ES6新语法规范</li>
        <!-- &lt;!&ndash;第二阶段：项目实战及响应式开发及前后端分离&ndash;&gt; -->
        <li>Hybrid混合式响应式布局开发</li>
        <li>AJAX及跨域请求</li>
        <li>前后端分离和HTTP基础</li>
        <!-- &lt;!&ndash;第三阶段：全栈工程化开发&ndash;&gt; -->
        <li class="item" id='demo'>NODE基础：能够基于Express/Koa等框架编写伪API</li>
        <li class="item item1">NODE基础：能够基于Express/Koa等框架编写伪API</li>
        <li>Vue及其全家桶：vue-cli\vue\vue-router\vuex\axios...</li>
        <li>React及其全家桶：react\react-dom\react-router\redux\react-redux\dva\ant...</li>
        <li>webpack</li>
        <li>git</li>
        <!-- &lt;!&ndash;第四阶段：分享课&ndash;&gt; -->
        <li class="item item1">微信小程序</li>
        <li>Canvas高级开发</li>
        <li>React Native</li>
    </ul>

    <script>
        //siblings获取所有兄弟元素节点
        let course = document.getElementById('course')
        let item = course.getElementsByClassName('item')[2]
        item.className='demo3'
        item.setAttribute('class','demo4')
        console.log(item.className)
        console.log(item.getAttribute('class'))

        let newp = document.createElement('p')

        newp.innerHTML = 'i am new p'
        newp.style.backgroundColor = 'red'
        newp.style.fontSize = '20px'
        course.appendChild(newp)
        // course.appendChild(newp) //[context].appendChild([newElement]) 末尾添加元素节点
        // course.insertBefore(newp,item)  //[context].insertBefore(newElement,oldElement)
        // console.log('')
        // let newCourse=course.cloneNode(true) //深克隆
        // document.body.appendChild(newCourse) //手动加到页面中去
        let li = document.getElementsByClassName('demo')[0]
        let a = li.getElementsByTagName('a')[0]
        // li.removeChild(a)
        // li.remove()
        li.removeChild(a)

        // 把当前节点元素作为一个对象，在对象的堆内存中动态添加自定义属性：属性值
        course.myIndex = 10
        console.log(course.myIndex)
        // 删除对象属性
        delete course.myIndex
        // 获取自带属性
        console.log(course.id)
        console.log(course.getAttribute('myIndex'))

        // 基于Attribute完成自定义属性的设置
        course.setAttribute('myColor','red')
        console.log(course.getAttribute('myColor'))
        course.removeAttribute('myColor')
        console.log(course.getAttribute('id'))
        





    </script>
</body>

</html>